<template>
	<view class="wrap">
	  <view class="platforms">
	    <text class="platforms-title">去水印助手暂只支持解析痘印小视频,其他平台后续开放</text>
	    <view class="page-body">
	      <view class="page-section page-section-spacing swiper">
	        <swiper>
	          <swiper-item>
	            <view class="swiper-item">
	              <view class="platforms-item">
	                <image src="/static/images/logo-douyin.png"></image>
	                <text>痘印</text>
	              </view>
	              <view class="platforms-item">
	                <image src="/static/images/logo-gitShow.png"></image>
	                <text>快手</text>
	              </view>
	              <view class="platforms-item">
	                <image src="/static/images/logo-ppx.png"></image>
	                <text>皮皮虾</text>
	              </view>
	              <view class="platforms-item">
	                <image src="/static/images/logo-volcano.png"></image>
	                <text>火山视频</text>
	              </view>
	            </view>
	            <view class="swiper-item">
	              <view class="platforms-item">
	                <image src="/static/images/logo-microview.png"></image>
	                <text>微视</text>
	              </view>
	              <view class="platforms-item">
	                <image src="/static/images/logo-meipai.png"></image>
	                <text>美拍</text>
	              </view>
	              <view class="platforms-item">
	                <image src="/static/images/logo-xiaokaxiu.png"></image>
	                <text>小咖秀</text>
	              </view>
	              <view class="platforms-item">
	                <image src="/static/images/logo-zuiyou.png"></image>
	                <text>最右</text>
	              </view>
	            </view>
	          </swiper-item>
	        </swiper>
	      </view>
	    </view>
	  </view>
	  <view class="watermark">
	    <view class="watermark-input">
	      <input id="inputText" placeholder=" 请复制视频链接，粘贴到这里" type="text" v-model="url" @focus="onBlur"></input>
	      <button @click="mousuosuo_clear" class="clearInputText">
	        <image src="/static/images/icon-clear-active.png"></image>
	      </button>
	    </view>
	    <button @click="removeWatermark" class="parsing" hoverClass="parsing-btn-hover" style="margin-top:10px;">一键去除水印</button>
		<button @click="toIOS" class="parsing" hoverClass="parsing-btn-hover" style="margin-top:10px;">IOS快捷指令去水印</button>
		<!-- #ifdef MP -->
		<button open-type="contact" class="parsing">联系客服</button>
		<!-- #endif -->
		<!-- #ifdef H5 -->
			<button @click="showWeChat" class="parsing">联系客服</button>
		<!-- #endif -->
	    <view class="faq">
	      <view class="faq-header">
	        <text class="faq-header-title">常见问题</text>
	      </view>
	      <view class="faq-content">
	        <view @click="mousuosuo_showSvPro" class="faq-content-list" data-index="1">
	          <text>使用方法</text>
	          <image src="/static/images/icon-more.png"></image>
	        </view>
			<view @click="mousuosuo_showSvPro" class="faq-content-list" data-index="3">
			  <text>为什么无法下载视频？</text>
			  <image src="/static/images/icon-more.png"></image>
			</view>
	        <view @click="mousuosuo_showSvPro" class="faq-content-list" data-index="4">
	          <text>为什么视频成功解析了还有水印？</text>
	          <image src="/static/images/icon-more.png"></image>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	
	import {login,getUserInfo} from '../../common/api/user.js'
	export default {
		data() {
			return {
				videoAd: null,  // 在页面中定义激励视频广告
				show_view: false,
				videoUrl: '',
				url: '',
				params: {},
				inviter_uid: '',
				uid: ''
			}
		},
		onShareAppMessage(res) {
			return {
				title: '去除水印小工具',
				path: '/pages/tool/index?invitation='+this.$store.state.userInfo.id
			}
		},
		onShareTimeline(res) {
			return {
				title: '去除水印小工具',
				path: '/pages/tool/index?invitation='+this.$store.state.userInfo.id
			}
		},
		onLoad(e) {
			//#ifdef MP
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},
		methods: {
			toIOS(){
				uni.navigateTo({
					url:'videoDesc'
				})
			},
			onBlur(event) {
				uni.getClipboardData({
				    success: (res)=> {
						console.log(res)
				        this.url=res.data;
				    }
				});
			},
			showWeChat(){
				uni.previewImage({
					urls: [this.contactImage]
				});
			},
			removeWatermark() {
				if(this.url==''){
					uni.showModal({
						title: '提示',
						content: '请输入痘印复制的视频链接',
						showCancel: false
					});
					return;
				}
				uni.navigateTo({
					url: 'video/index?query=' + encodeURIComponent(this.url)
				});
			},
			mousuosuo_showSvPro(e) {
			    var index = e.target.dataset.index
			    switch (index) {
			      case '1':
					/* uni.showToast({
						icon: 'none',
						title: '去除一个小视频水印消耗5积分，每天签到可获取10积分'
					}) */
					uni.previewImage({
						urls: ['https://img.yourtools.icu/hqljff.jpg']
					});
					uni.showModal({
						title: '使用说明',
						content: '去平台复制您要去水印的地址粘贴到文本框里面，再点击去除水印',
						showCancel: false
					});
			        break
				  case '2':
						uni.showModal({
							title: '邀请好友说明',
							content: '转发小程序给微信好友或微信群，好友点击使用(登录授权)后即算邀请成功；成功邀请1位好友可获得100积分，邀请好友及获取积分无上限。',
							showCancel: false
						});
				    break
				  case '3':
				    uni.showToast({
				    	icon: 'none',
				    	title: '先授权保存到相册'
				    })
				    break
			      case '4':
				    uni.showToast({
				    	icon: 'none',
				    	title: '视频自带无法去除'
				    })
			        break
			      default:
			        break
			    }
			},
			mousuosuo_clear () {
			    this.url = ''
			}
		}
	}
</script>

<style>
	page {
	    background-color: #0000;
	    height: 100%;
	    font-size: 32rpx;
	    line-height: 1.6;
	}
	
	.wrap {
	    height: 100%;
	}
	
	.page-body {
	    height: 400rpx;
	    padding-top: 28rpx;
	}
	
	.page-section {
	    position: relative;
	    overflow: hidden;
	    width: 514rpx;
	    margin: 0 auto;
	}
	
	.page-section swiper {
	    height: 194rpx;
	}
	
	.page-section_center {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	
	.page-section:last-child {
	    margin-bottom: 0;
	}
	
	.page-section-gap {
	    box-sizing: border-box;
	    padding: 0 30rpx;
	}
	
	.page-section-title {
	    font-size: 50rpx;
	    color: #999;
	    margin-bottom: 10rpx;
	    padding-left: 30rpx;
	    padding-right: 30rpx;
	}
	
	.page-section-gap .page-section-title {
	    padding-left: 0;
	    padding-right: 0;
	}
	
	.show_view {
		display: none !important;
	}
	
	.demo-text-1 {
	    position: relative;
	    align-items: center;
	    justify-content: center;
	    background-color: #1aad19;
	    color: #fff;
	    font-size: 36rpx;
	}
	
	.demo-text-1:before {
	    content: 'A';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
	
	.demo-text-2 {
	    position: relative;
	    align-items: center;
	    justify-content: center;
	    background-color: #2782d7;
	    color: #fff;
	    font-size: 36rpx;
	}
	
	.demo-text-2:before {
	    content: 'B';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
	
	.demo-text-3 {
	    position: relative;
	    align-items: center;
	    justify-content: center;
	    background-color: #f1f1f1;
	    color: #353535;
	    font-size: 36rpx;
	}
	
	.demo-text-3:before {
	    content: 'C';
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	}
	
	button {
	    margin-bottom: 30rpx;
	}
	
	button:last-child {
	    margin-bottom: 0;
	}
	
	.page-section-title {
	    padding: 0;
	}
	
	.swiper-item {
	    overflow: hidden;
	    display: block;
	    margin-bottom: 14rpx;
	}
	
	.page-section-title {
	    margin-top: 60rpx;
	    position: relative;
	}
	
	.info {
	    position: absolute;
	    right: 0;
	    color: #d81818;
	    font-size: 30rpx;
	}
	
	.page-foot {
	    margin-top: 50rpx;
	}
	
	.platforms {
	    background-color: #99CCFF;
	    position: absolute;
	    top: 0;
	    width: 100%;
	    z-index: 1;
	}
	
	.platforms-title {
	    display: block;
	    font-size: 22rpx;
	    color: #999999;
	    text-align: center;
	    padding-top: 32rpx;
	}
	
	.platforms-title::before,.platforms-title::after {
	    content: '';
	    display: inline-block;
	    width: 6rpx;
	    height: 6rpx;
	    background-color: #999999;
	    border-radius: 2px;
	    transform: rotate(45deg);
	    vertical-align: middle;
	}
	
	.platforms-title::before {
	    margin-right: 8rpx;
	}
	
	.platforms-title::after {
	    margin-left: 8rpx;
	}
	
	.platforms-item {
	    float: left;
	    width: 80rpx;
	    text-align: center;
	    margin-right: 58rpx;
	}
	
	.platforms-item:last-child {
	    margin-right: 0;
	}
	
	.platforms-item image {
	    display: block;
	    width: 60rpx;
	    height: 60rpx;
	    margin: 0 auto;
	}
	
	.platforms-item text {
	    display: block;
	    font-size: 20rpx;
	    color: #fff;
	    text-align: center;
	    white-space: nowrap;
	    margin-top: 2rpx;
	}
	
	.dots {
	    overflow: hidden;
	    width: 50rpx;
	    margin: 40rpx auto 80rpx;
	}
	
	.dot {
	    float: left;
	    width: 26rpx;
	    height: 8rpx;
	    border-radius: 20rpx;
	    margin-right: 16rpx;
	    background-color: white;
	}
	
	.dot:last-child {
	    margin-right: 0;
	}
	
	.active {
	    width: 8rpx;
	    height: 8rpx;
	    background-color: #fff;
	}
	
	.watermark {
	    position: relative;
	    background-color: #fff;
	    border-top-left-radius: 20rpx;
	    border-top-right-radius: 20rpx;
	    padding-top: 76rpx;
	    top: 412rpx;
	    z-index: 9;
	}
	
	.watermark-input {
	    position: absolute;
	    top: -64rpx;
	    left: 50%;
	    width: 664rpx;
	    height: 108rpx;
	    margin-left: -332rpx;
	    z-index: 9;
	    background-color: #fff;
	    box-shadow: 0 12rpx 28rpx rgba(153,153,153,0.34);
	    border-radius: 16rpx;
	}
	
	.watermark-input input {
	    float: left;
	    width: 80%;
	    height: 100%;
	    font-size: 28rpx;
	    padding-left: 30rpx;
	}
	
	.clearInputText {
	    display: flex;
	    width: 100rpx;
	    height: 100%;
	    border: none;
	    background-color: #fff;
	    align-items: center;
	}
	
	.clearInputText:after {
	    border: none;
	}
	
	.clearInputText image,uni-image {
	    display: block;
	    width: 30rpx;
	    height: 30rpx;
	}
	
	.parsing {
	    overflow: hidden;
	    display: block;
	    width: 664rpx;
	    height: 88rpx;
	    line-height: 88rpx;
	    color: #fff;
	    background-color: #337aff;
	    box-shadow: 0 14rpx 28rpx rgba(51,122,255,0.3);
	}
	
	.appreciate {
	    color: #000;
	    background-color: #f8f8f8;
	    box-shadow: none;
	}
	
	.parsing-btn-hover {
	    background: #3f6ddd;
	    border: 1px solid #1e4ecb;
	}
	
	.list-hover-class {
	    background-color: #EBEBEB;
	    border-radius: 12rpx;
	}
	
	.faq {
	    width: 664rpx;
	    margin: 106rpx auto 0;
	}
	
	.faq-header {
	    display: flex;
	    justify-content: space-between;
	    margin-bottom: 16rpx;
	}
	
	.faq-header-title {
	    font-size: 28rpx;
	    font-weight: 600;
	}
	
	.faq-header-more {
	    font-size: 24rpx;
	    color: #989898;
	}
	
	.faq-content {
	    width: 100%;
	    border-radius: 12rpx;
	    background: #f6f6f6;
	}
	
	.faq-content-list {
	    overflow: hidden;
	    height: 108rpx;
	    line-height: 108rpx;
	}
	
	.faq-content-list text {
	    font-size: 26rpx;
	    color: #666;
	    margin-left: 32rpx;
	}
	
	.faq-content-list image {
	    float: right;
	    width: 16rpx;
	    height: 22rpx;
	    margin-top: 43rpx;
	    margin-right: 38rpx;
	}
	
	.contact {
	    font-size: 24rpx;
	    text-align: center;
	    padding-top: 70rpx;
	    padding-bottom: 32rpx;
	}
	
	.contact-copy {
	    color: #337aff;
	    text-decoration: underline;
	    margin-left: 30rpx;
	}
	.center {
	  text-align: center;
	  color: #f0f0f0;
	}
</style>

